<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<view class="uni-tabbar__bd">
				<view class="uni-tabbar__icon">
					<image v-if="item.pagePath == pagePath" class="icon-img" :src="item.selectedIconPath"
						mode="aspectFit"></image>
					<image v-else class="icon-img" mode="aspectFit" :src="item.iconPath"></image>
				</view>
			</view>
			<!-- //判断tabbar点击前后的样式 -->
			<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * tabBar 底部导航栏
	 * @description 动态底部导航栏
	 * @property {String} pagePath 当前页面路径
	 */
	export default {
		props: {
			pagePath: {
				type:String,
				default:''
			}
		},
		data () {
			return {
				// 公共的tabbar
				tabbar: [{
						text: '首页',
						pagePath: 'pages/tab/index/index',
						iconPath: '/static/tabBar/home.png',
						selectedIconPath: '/static/tabBar/home_blue.png'
					},
					{
						pagePath: 'pages/tab/my/my',
						iconPath: '/static/tabBar/user.png',
						selectedIconPath: '/static/tabBar/user_blue.png',
						text: '我的'
					}
				]
			}
		},
		watch: {
			pagePath: {
				handler (pagePath) {
					console.log('pagePath监听===val', pagePath)
				},
				immediate: true
			}
		},
		methods: {
			changeTab (item) {
				this.page = item.pagePath
				uni.switchTab({
					url: '/' + this.page
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 998;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		padding: 16rpx 0;
		box-sizing: border-box;
		// border-top: solid 1rpx #ccc;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		.uni-tabbar__item {
			display: block;
			line-height: 24rpx;
			font-size: 20rpx;
			text-align: center;
			width: 25%;
			position: relative;
			.dian {
				height:30rpx;
				padding: 14rpx 4rpx;
				color: #fff;
				display: flex;
				align-items: center;
				background-color: #fe0e4d;
				border-radius: 20rpx 20rpx 20rpx 8rpx;
				position: absolute;
				top: -8rpx;
				left: calc(((100% - 52rpx)/2) + 36rpx);
				z-index: 9999999;
				font-size: 20rpx;
				font-family: "Helvetica Neue", Helvetica, sans-serif;
				min-width: 30rpx;
				justify-content:center;
				box-shadow: -1px 1px 0 rgba(255,255,255,1);
				transform: scale(.9);

			}

		}

		.uni-tabbar__icon {
			height: 24px;
			line-height: 24px;
			text-align: center;
		}

		.icon {
			display: inline-block;
		}

		.uni-tabbar__label {
			margin-top: 2rpx;
			line-height: 24rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;

			&.active {
				color: var(--primary-color);
			}
		}

		.icon-img {
			height: 24px;
			width: 24px;
		}
	}
</style>
